<style>
@font-face {
    font-family: "openDyslexic";
    src: url(file/resource/39C3CCF920030515B1DBFF22B7D91207394AD65C502267D8.woff);
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F001D200303FFF6E56F77B906690AB327C2FC06326420.woff");
    font-weight: bold;
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F0F3E20030EA721321F3491BA3D046063DCDC848F129B.woff");
    font-style: italic, oblique;
}
@font-face {
    font-family: "openDyslexic";
    src: url("file/resource/429F091E200300ABDC76AFFF8047FF061364FD7C83721D3F.woff");
    font-weight: bold;
    font-style: italic, oblique;
}
</style>

<label role="checkbox" data-attr="alert" class="frogui_components_checkbox_toggle label-top" data-mode="full">
<label for="Dyslexictoggle" class="switch-container">Dyslexic font:
    <input type="checkbox" id="Dyslexictoggle" name="Dyslexictoggle" value="1" class="switch-input Dyslexictoggle">
    <div class="switch">
        <span class="switch-label">On</span>
        <span class="switch-label">Off</span>
        <span class="switch-handle">|||</span>
    </div>
</label>
</label>

<script>
var newDiv = $('<div class="dyslexicStyle"></div>');
this.element.append(newDiv);

this.element.find('#Dyslexictoggle').on('click', function(ev) {

    if($(ev.target).val()>0) {
        $(ev.target).val(0);
        $(ev.target).addClass('checked');

        newDiv.html(
                '<style>'+
                '.widget_text {'+
                'font-family: "openDyslexic" !important;'+
                '}'+
                '</style>'
            );
     } else {
        $(ev.target).val(1);
        $(ev.target).removeClass('checked'); 
        newDiv.html('');
     }
});
</script>